import {memo, useCallback, useState} from 'react';
import type {FC, PropsWithChildren} from 'react';
import {Link} from 'react-router-dom';
import {Button, Form, Input, message, Modal, Table, Tag} from 'antd';
import {ColumnsType} from 'antd/es/table';
import {resMyGoodsCommentList, resReplyComment} from '@/services/comment';
import {useAntdTable} from 'ahooks';
import {
  itemStyle,
  orderNoStyle,
  style,
} from '@/pages/Profile/components/MyOrders';
import {formatTime} from '@/utils/format';

const createColumns = (
    refresh: () => void,
    showModal: (id: number) => void
): ColumnsType<API.CommentDetailStruct> => {
  return [
    {
      title: <div className={'font-bold'}>商品名称</div>,
      align: 'center',
      render: (_, comment) => (
          <Link to={`/goods_detail/` + comment.goods_id}>
            {comment.goods && comment.goods.title}
          </Link>
      ),
    },
    {
      title: <div className={'font-bold'}>评价内容</div>,
      dataIndex: 'content',
      align: 'center',
      ellipsis: true,
    },
    {
      title: <div className={'font-bold'}>评价时间</div>,
      dataIndex: 'created_at',
      align: 'center',
      render: (create_at) => <div>{formatTime(create_at)}</div>,
    },
    {
      title: <div className={'font-bold'}>评论类型</div>,
      render: (_, comment) => (
          <Tag color={comment.orders_id === 1 ? 'green' : 'orange'}>
            {comment.orders_id === 1 ? '经典书评' : '买家评论'}
          </Tag>
      ),
      align: 'center',
    },
    {
      title: <div className={'font-bold'}>商家回复</div>,
      dataIndex: 'reply',
      align: 'center',
      ellipsis: true,
    },
    {
      title: <div className={'font-bold'}>操作</div>,
      align: 'center',
      render: (_, comment) => (
          <Button
              // disabled={Boolean(comment.reply)}
              type={'link'}
              onClick={() => {
                showModal(comment.id);
              }}
          >
            回复
          </Button>
      ),
    },
  ];
};

const autoSize = {minRows: 4, maxRows: 8};

const ReplyPage: FC<PropsWithChildren<{}>> = () => {
  const [form] = Form.useForm();
  const {tableProps, pagination, search} = useAntdTable(
      ({pageSize, current}, formData: API.QueryGoodsComment) => {
        return resMyGoodsCommentList({
          pageSize,
          current,
          ...formData,
        });
      },
      {form, cacheKey: 'useReplyCache'}
  );

  const {submit} = search;

  const searchForm = (
      <div className={''}>
        <Form form={form} className={'flex'}>
          <Form.Item name="title">
            <Input.Search placeholder="请输入商品名" onSearch={submit}/>
          </Form.Item>
        </Form>
      </div>
  );

  const [isModalOpen, setIsModalOpen] = useState({show: false, id: 0});
  const showModal = useCallback((id: number) => {
    setIsModalOpen({show: true, id});
  }, []);
  const handleCancel = useCallback(
      () => setIsModalOpen({...isModalOpen, show: false}),
      [isModalOpen]
  );

  const refresh = () => {
    pagination.changeCurrent(pagination.current);
  };

  const columns = createColumns(refresh, showModal);
  return (
      <div style={style} className={'p-4 hidden-scrollbar'}>
        {searchForm}
        <div className={'rounded-lg overflow-hidden'}>
          <Table columns={columns} rowKey="id" {...tableProps} />
        </div>
        <Modal
            title={'回复评论'}
            open={isModalOpen.show}
            onCancel={handleCancel}
            footer={null}
        >
          <Form
              onFinish={(value: any) => {
                isModalOpen.id > 0 &&
                resReplyComment(isModalOpen.id, value).then(() => {
                  message.success('回复评论成功');
                  refresh();
                  handleCancel();
                });
              }}
          >
            <Form.Item name={'reply'}>
              <Input.TextArea allowClear showCount autoSize={autoSize}/>
            </Form.Item>
            <Form.Item>
              <div className={'text-right pt-2'}>
                <Button htmlType={'submit'} type={'primary'}>
                  回复
                </Button>
              </div>
            </Form.Item>
          </Form>
        </Modal>
      </div>
  );
};

export default memo(ReplyPage);
